<template>
  <div class="RecommendContent">
    <ul>
      <li v-for="item in recommendItemData" :key="item.id" >
        <a href="" target="_blank">
          <div class="images">
            <img :src="item.tthumb" alt="新版系统上线啦！" />
          </div>
          <div class="text">
            <h3>{{item.title}}</h3>
            <p>2000㎡ | 办公 | 网络/科技</p>
            <div class="click-more" @click="goDetail(item)">CLICK MORE ↓</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
	const props = defineProps({
		recommendItemData: {
			type: Array,
			default: () => []
		}
	})
</script>

<style lang="less" scoped>
.RecommendContent {
	width: 1400px;
	overflow: hidden;
  ul {
    display: flex;
    flex-wrap: wrap;
	width: 1500px;

    > li {
      width: 325px;
      height:273px;
      overflow: hidden;
      margin-right: 30px;
      margin-bottom: 30px;
      border-bottom: 1px solid #eeeeee;
    }

    li {
		a {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;

			&:hover {
				color: #fff;
				background: #da1a45;

				p {
					color: #fff !important;
				}

				.images {
					transform: translateY(-44px);
				}

				.text {
					height: 126px;
					padding: 0 20px;
				}
			}

			.images {
				transition: all 0.4s ease;

				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				transition: height 0.4s ease;
				height: 82px;

				h3 {
					padding-top: 20px;
					font-size: 16px;
					margin-bottom: 10px;
					color: #fff;
				}

				p {
					color: #969696;
					margin-bottom: 20px;
				}
			}
		}
	}
  }
}
</style>
